<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=UzpZ9A94pysSfj013URfjCfeUKjMv52F"></script>
    <title>单个标注点沿直线的轨迹运动</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
    // 百度地图API功能
    var map0 = new BMap.Map("allmap");
    map0.centerAndZoom(new BMap.Point(121.510650, 31.254412), 9);
    var polyline = new BMap.Polyline([
            // var myP1 = new BMap.Point(121.510650,31.254412);    //起点
            new BMap.Point(121.510650, 31.254412),
            new BMap.Point(121.510175, 31.252064),
            new BMap.Point(121.538921, 31.25404),
            new BMap.Point(121.574566, 31.284165),
            new BMap.Point(121.571116, 31.298483),
            new BMap.Point(121.560768, 31.340438),
            new BMap.Point(121.54237, 31.348826),
            new BMap.Point(121.5142, 31.362641),
            new BMap.Point(121.50845, 31.373988),
            new BMap.Point(121.515924, 31.391744),
            new BMap.Point(121.551569, 31.413443),
            new BMap.Point(121.793034, 31.277252),
            new BMap.Point(121.88272, 31.275277),
            new BMap.Point(122.009202, 31.496244),
            new BMap.Point(122.176996, 32.854422),
            new BMap.Point(122.250585, 34.819437),
            new BMap.Point(122.508147, 36.143659),
            new BMap.Point(122.912887, 37.195918),
            new BMap.Point(122.747312, 38.17552),
            new BMap.Point(122.452955, 38.883657),
            new BMap.Point(121.851675, 38.937295),
            new BMap.Point(121.748359, 39.034749)
        ],
        {strokeColor: "blue", strokeWeight: 6, strokeOpacity: 0.5});
         map0.addOverlay(polyline);


// <!--// var myP2 = new BMap.Point(121.748359,39.034749);    //终点-->
var myIcon = new BMap.Icon("../img/chuan01.jpg", new BMap.Size(32, 125), {    //小车图片-->
offset: new BMap.Size(0, -5),    //相当于CSS精灵-->
imageOffset: new BMap.Size(0, 0)    //图片的偏移量。为了是图片底部中心对准坐标点。-->
});
var driving2 = new BMap.DrivingRoute(map0, {renderOptions:{map: map0, autoViewport: true}});    //驾车实例-->
driving2.search(myP1, myP2);    //显示一条公交线路-->

window.run = function (){
     var driving = new BMap.DrivingRoute(map0);    //驾车实例-->
     driving.search(myP1, myP2);
     driving.setSearchCompleteCallback(function(){
         var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组-->
         var paths = pts.length;    //获得有几个点-->

        var carMk = new BMap.Marker(pts[0],{icon:myIcon});
        map0.addOverlay(carMk);
        i=0;
        function resetMkPoint(i){
            carMk.setPosition(pts[i]);
            if(i < paths){
                setTimeout(function(){
                    i++;
                    resetMkPoint(i);
                },100);
            }
        }
        setTimeout(function(){
            resetMkPoint(5);
        },100)

    });
}

</script>
<!--window.run = function (){-->

<!--var pts ={(122.176996,32.854422),(122.250585,34.819437),(122.508147,36.143659),(122.912887,37.195918),(122.747312,38.17552),(122.452955,38.883657)}//你获取到的一系列点的数组(通过gps或其他接口)-->

<!--var paths = pts.length;    //获得有几个点-->

<!--var carMk = new BMap.Marker(pts[0],{icon:myIcon});-->

<!--map.addOverlay(carMk);-->

<!--i=0;-->

<!--function resetMkPoint(i){-->

<!--carMk.setPosition(pts[i]);//重新设置marker的position-->

<!--if(i < paths){-->

<!--setTimeout(function(){-->

<!--i++;-->

<!--resetMkPoint(i);-->

<!--},100);-->

<!--}-->

<!--}-->

<!--setTimeout(function(){-->

<!--resetMkPoint(5);-->

<!--},100)-->


<!--});-->

<!--}-->
<!--// window.run = function (){-->
<!--//-->
<!--//     var pts ={?????}//你获取到的一系列点的数组(通过gps或其他接口)-->
<!--//-->
<!--//     var paths = pts.length;    //获得有几个点-->
<!--//-->
<!--//     var carMk = new BMap.Marker(pts[0],{icon:myIcon});-->
<!--//-->
<!--//     map.addOverlay(carMk);-->
<!--//-->
<!--//     i=0;-->
<!--//-->
<!--//     function removeMkPoint(i){-->
<!--//-->
<!--//         if(i < paths){//-->
<!--//-->
<!--//             setTimeout(function(){-->
<!--//-->
<!--//                 i++;-->
<!--//-->
<!--//                 map.removeOverlay(carMk);//清除前一个marker-->
<!--//-->
<!--//                 removeMkPoint(i);-->
<!--//-->
<!--//             },100);-->
<!--//-->
<!--//         }-->
<!--//-->
<!--//     }-->
<!--//-->
<!--//     setTimeout(function(){-->
<!--//-->
<!--//         resetMkPoint(5);-->
<!--//-->
<!--//     },100)-->
<!--//-->
<!--//-->
<!--//-->
<!--// });-->
<!--//-->
<!--// }-->

<!--setTimeout(function(){-->
<!--run();-->
<!--},1500);-->
<!--</script>-->
